<template>
  <el-row :gutter="22">
    <el-col :xl="2" :lg="1" :md="2" :sm="2" :xs="0" :offset="5">
      <img src="../assets/文字logo.png" />
    </el-col>
    <el-col :xl="1" :lg="1" :md="2" :sm="2" :xs="3" class="headselect">
      <el-link href="/main">首页</el-link>
    </el-col>
    <el-col :xl="1" :lg="1" :md="2" :sm="2" :xs="3" class="headselect">
      <el-link href="#">刷题</el-link>
    </el-col>
    <el-col :xl="1" :lg="1" :md="2" :sm="2" :xs="3" class="headselect">
      <el-link href="#">发现</el-link>
    </el-col>
    <el-col :xl="1" :lg="1" :md="2" :sm="2" :xs="3" class="headselect">
      <el-link href="#">资源</el-link>
    </el-col>
    <el-col :xl="4" :lg="4" :md="3" :sm="2" :xs="0" :offset="1">
      <el-input
        placeholder="请输入内容"
        size="small"
        style="margin-top: 14px"
        suffix-icon="el-icon-search"
      >
      </el-input>
    </el-col>
    <el-col :xl="1" :lg="1" :md="2" :sm="2" :xs="0" offset="1">
      <el-dropdown @command="dividPage">
        <span class="el-dropdown-link">
          <el-badge is-dot class="item" style="margin-top: 14px">
            <el-avatar
              shape="circle"
              :size="30"
              fit="cover"
              src="https://aedupro.oss-cn-beijing.aliyuncs.com/2022/04/30/92d61027d1ab465aa74eb94afed7bd6b%E8%89%BE%E6%96%AF.png"
            ></el-avatar>
          </el-badge>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a" icon="el-icon-plus"
            >个人中心</el-dropdown-item
          >
          <el-dropdown-item command="b" icon="el-icon-edit"
            >创作中心</el-dropdown-item
          >
          <el-dropdown-item command="c" class="clearfix">
            消息中心
            <el-badge class="mark" :value="99" />
          </el-dropdown-item>
          <el-dropdown-item command="d" icon="el-icon-circle-plus"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
    <el-divider class="headsplit"></el-divider>
  </el-row>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {};
  },
  methods: {
    handleCommand() {},
    //点击头像下拉框跳转页面
    dividPage(command) {
      console.log("进来了");
      if (command == "a") {
        this.$router.push({
          path: "/homepage",
        });
      }
      if (command == "b") {
        this.$router.push({
          path: "/center",
        });
      }
    },
  },
};
</script>
<style>
.headselect {
  line-height: 61px;
}
.headsplit {
  margin-top: 62px;
  margin-bottom: 0px;
}
</style>